<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <!--    引入路由文件-->
    <script src="../js/vue-router3.js"></script>
</head>
<body>
<!--
   路由切换时 如何实现参数的传递
   1.query string   /login?username=tom&password=123456
   2.path     /login/tom/123456
-->
<div id="app">
    <!--声明路由组件的出口-->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    <hr>
    <h2>路由的切换方式1 超链接</h2>
    <a href="#/login?username=tom&password=123456">登录</a>
    <a href="#/register/tom/123456">注册</a>
    <hr>
    <h2>路由的切换方式2 router-link to string </h2>
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <hr>
    <h2>路由的切换方式3 router-link :to </h2>
    <router-link :to="{path:'/login',query:{username:'jack',password:'666666'}}">登录</router-link>
    <!--    跳转路径通过路由别名设置 便于后期的维护 -->
    <router-link :to="{name:'register',params:{username:'jack',password:'666666'}}">注册</router-link>

</div>


<script>
    /*定义路由组件  login  register*/
    let login = {
        template: `
        <div>
            <h2>登录</h2>
            <form action="#">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="password" placeholder="请输入密码"></p>
                <p><input type="submit" value="立即登录"></p>
            </form>
        </div>
        `,
        created() {
            console.log('longin组件被渲染')
            console.log(this.$route)
            // 如何获取路由参数   路由对象    query  ?
            let {username, password} = this.$route.query   // {username:'tom',password:'123456'}
            console.log(username, password)
        },
        destroyed() {
            console.log('longin组件被销毁')
        }
    }

    let register = {
        template: `
        <div>
            <h2>注册</h2>
            <form action="#">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="password" placeholder="请输入密码"></p>
                <p><input type="submit" value="立即注册"></p>
            </form>
        </div>
        `,
        created() {
            console.log('register组件被渲染')
            console.log(this.$route)
            // path  params
            let {username, password} = this.$route.params
            console.log(username, password)
        },
        destroyed() {
            console.log('register组件被销毁')
        }
    }

    let file404 = {
        template: `
            <div>404 页面找不到</div>
        `
    }

    // 定义路由列表   路径和组件的映射关系
    let routes = [
        {
            path: '/',
            redirect: '/login'   // 重定向
        },
        {
            path: '/login',  // 路径
            component: login,  // 路径对应的组件
            name: 'login'    //  路由的别名
        },
        {
            path: '/register/:username/:password',
            component: register,
            name: 'register'
        },
        {
            path: '/*',
            component: file404
        }
    ]

    // 创建路由对象 router
    let router = new VueRouter({
        routes
    })

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            login, register
        },
        //     扩展vue的路由功能
        router
    })

</script>

</body>
</html>